import Taro from '@tarojs/taro'
import { useSelector, useDispatch } from 'react-redux'
import { useEffect, useState } from 'react'

import { View, Block, Image, Text } from '@tarojs/components'
import './Header.less'
import arrowleft from '../../../assets/images/icon-arrow-left.png'
/**
 * 描述
 * @date 2021-06-01
 * @param {any} props
 * @param {onBack} 自定义返回事件，父组件调用
 * @param {title} 标题内容
 * @param {showUserAvatar} 显示用户头像
 * @param {showTitleIcon} 显示标题右边箭头
 * @param {replaceBack} 是否自定义返回事件
 * @param {defaultlogo} 默认头像
 * @returns {any}
 */
export default function Header(props) {
  const { onBack, handleTapTitle, show = true, title, showPlaceholder = true, showTitleIcon, showUserAvatar = false, replaceBack = false, defaultlogo = `https://rtds.szft.gov.cn/gov/mp/images/defaultlogo.png` } = props
  const __isBindStaff = useSelector(state => state.userInfo.__isBindStaff);

  const [showBackBtn, setShowBackBtn] = useState(false)
  useEffect(() => {
    const pages = Taro.getCurrentPages()
    setShowBackBtn(pages.length > 1)
  }, [])
  const [homeName, setHomeName] = useState('个人中心')
  useEffect(() => {
    setHomeName(__isBindStaff ? '公文包' : '个人中心')
  }, [__isBindStaff])

  const __headerTitle = useSelector(state => state.company.__headerTitle);
  const __systemInfo = useSelector(state => state.company.__systemInfo);
  const statusBarHeight = __systemInfo.statusBarHeight
  // 返回上一页事件
  function handleGoBack() {
    if (props.replaceBack) {
      return onBack()
    }
    Taro.navigateBack()
  }
  //  标题点击事件
  function clickTitle() {
    return handleTapTitle()
  }
  return (
    <Block>
      <View className='navigation' style={{ transform: `translateY:${show ? '0' : -(statusBarHeight + 44)}px` }}>
        <View className='header header-class' style={{ paddingTop: `${statusBarHeight}px;` }}>
          <View className={`left ${showUserAvatar && !replaceBack && !showBackBtn} ? 'red-tip' : ''`}
            style={{ top: `${statusBarHeight}px` }}
          >
            {(replaceBack || showBackBtn) &&
              <View className='back' onClick={() => { handleGoBack() }}>
                <Image className='iconfont' src={arrowleft} ></Image>
              </View>
            }
            {showUserAvatar &&
              <View className='home pr'>
                <View className='avatar'>
                  <open-data className='img' type='userAvatarUrl'></open-data>
                  <Image className='img-bak' src={`${defaultlogo}`} />
                </View>
                <Text className='usercenter'>{homeName}</Text>
                {/* <login-button bind:logined='handleGoHome' user-info={`${userInfo}`/> */}  
              </View>
            }
          </View>
          <View className='title' onClick={handleTapTitle ? clickTitle : ''}>
            <Text className='title-text title-class'>{title || __headerTitle}</Text>
            {showTitleIcon && <Image className='title-icon' mode='widthFix' src={arrowleft} />}
          </View>
        </View>
      </View>
      {
        showPlaceholder && (<View style={{ height: `${statusBarHeight + 44}px` }}></View>)
      }
    </Block>
  )
}

